<template>
  <view 
    class="fu-radio"
    :class="[
      `fu-radio--${size}`,
      {
        'fu-radio--disabled': disabled,
        'fu-radio--checked': isChecked
      }
    ]"
    @click="handleClick"
  >
    <view class="fu-radio__input">
      <view class="fu-radio__inner"></view>
    </view>
    <view class="fu-radio__label">
      <slot>{{ label }}</slot>
    </view>
  </view>
</template>

<script>
/**
 * fu-radio 单选框组件
 * @description 单选框表单组件
 * @property {String | Number | Boolean} modelValue - 单选框的值
 * @property {String | Number | Boolean} label - 单选框的标签值
 * @property {String} size - 尺寸，可选值：large/normal/small/mini
 * @property {Boolean} disabled - 是否禁用
 * @event {Function} update:modelValue - 值变化时触发
 * @event {Function} change - 值变化时触发
 */
export default {
  name: 'fu-radio',
  props: {
    modelValue: {
      type: [String, Number, Boolean],
      default: ''
    },
    label: {
      type: [String, Number, Boolean],
      default: ''
    },
    size: {
      type: String,
      default: 'normal'
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  emits: ['update:modelValue', 'change'],
  inject: {
    radioGroup: {
      default: null
    }
  },
  computed: {
    isChecked() {
      const value = this.radioGroup ? this.radioGroup.modelValue.value : this.modelValue
      return value === this.label
    }
  },
  methods: {
    handleClick() {
      if (this.disabled) return
      if (!this.isChecked) {
        if (this.radioGroup) {
          this.radioGroup.handleRadioChange(this.label)
        } else {
          this.$emit('update:modelValue', this.label)
          this.$emit('change', this.label)
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.fu-radio {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin-right: 20rpx;
  
  &__input {
    position: relative;
    width: 40rpx;
    height: 40rpx;
    border: 2rpx solid var(--fu-border-color);
    border-radius: 50%;
    transition: all 0.2s;
    
    .fu-radio__inner {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0);
      width: 20rpx;
      height: 20rpx;
      background-color: var(--fu-primary-color);
      border-radius: 50%;
      transition: transform 0.15s ease-in;
    }
  }
  
  &__label {
    padding-left: 10rpx;
    font-size: var(--fu-font-size-base);
    color: var(--fu-text-color);
    line-height: 1;
  }
  
  // 选中状态
  &--checked {
    .fu-radio__input {
      border-color: var(--fu-primary-color);
      
      .fu-radio__inner {
        transform: translate(-50%, -50%) scale(1);
      }
    }
  }
  
  // 禁用状态
  &--disabled {
    cursor: not-allowed;
    opacity: 0.5;
    
    .fu-radio__label {
      color: var(--fu-text-color-disabled);
    }
  }
  
  // 尺寸
  &--large {
    .fu-radio__input {
      width: 48rpx;
      height: 48rpx;
      
      .fu-radio__inner {
        width: 24rpx;
        height: 24rpx;
      }
    }
    
    .fu-radio__label {
      font-size: var(--fu-font-size-lg);
    }
  }
  
  &--small {
    .fu-radio__input {
      width: 32rpx;
      height: 32rpx;
      
      .fu-radio__inner {
        width: 16rpx;
        height: 16rpx;
      }
    }
    
    .fu-radio__label {
      font-size: var(--fu-font-size-sm);
    }
  }
  
  &--mini {
    .fu-radio__input {
      width: 28rpx;
      height: 28rpx;
      
      .fu-radio__inner {
        width: 14rpx;
        height: 14rpx;
      }
    }
    
    .fu-radio__label {
      font-size: var(--fu-font-size-xs);
    }
  }
}
</style> 